
<template>
  <div class="list" ref="wrapper">
    <div>
      <div class="are">
        <div class="title border-topbottom">当前城市</div>
        <div class="button-list">
          <div class="button-wrapper">
            <div class="button">{{ this.city }}</div>
          </div>
        </div>
      </div>
      <div class="are">
        <div class="title border-topbottom">热门城市</div>
        <div class="button-list">
          <div class="button-wrapper" 
               v-for="ite of hot" 
               :key="ite.id"
               @click="cityClick(ite.name)"
          >
            <div class="button">{{ ite.name }}</div>
          </div>
        </div>
      </div>
      <div class="are" 
           v-for="(cits, key) of cities" 
           :key="key" 
           :ref="key"
      >
        <div class="title border-topbottom">{{ key }}</div>
          <ul class="iteam-list" v-for="ite of cits" 
              :key="ite.id"
              @click="cityClick(ite.name)"
          >
            <li class="iteam border-bottom">{{ ite.name }}</li>
          </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll"
import { mapState , mapMutations} from 'vuex'
export default {
  name: "CityList",
  props: {
    hotCities: Array,
    cities: Object,
    letter: String
  },
  data (){
    return {
      hot: this.hotCities,
      citys: this.cities,
      cityLetter: this.letter
    }
  },
  watch: {
    hotCities (ne){
      this.hot = ne
    },
    cities (ne){
      this.citys = ne
    },
    letter(ne) {
      this.scroll.scrollToElement(this.$refs[ne][0],300)
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper)
  },  
  computed: {
    ...mapState(['city'])
  },
  methods: {
    cityClick(cityName){
      //首先派发事件。先不直接操作具体数据
      // this.$store.dispatch("cityChange", cityName)
      //数据量比较少，可以跳过数据派发环节直接操作数据
      // this.$store.commit("cityChange", cityName)
      this.cityChange(cityName)
      this.$router.push("/")
    },
    ...mapMutations(['cityChange'])
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
    .border-topbottom
      &:before
        border-color: #ccc
      &:after
        border-color: #ccc
    .border-bottom
      &:before
        border-color: #ccc
    .list
      overflow: hidden
      position: absolute
      // position: fixed
      top: 1.58rem
      left: 0
      right: 0
      bottom: 0
      .title
        line-height: .54rem
        background: #eee
        padding-left: .2rem
        color: #666
        font-size: .26rem 
      .button-list
        overflow: hidden
        padding: .1rem .6rem .1rem .1rem
        .button-wrapper
          float: left
          width: 33.33%
          text-align: center    
          .button
            margin: .1rem
            padding: .1rem 0
            border: .02rem solid #ccc
            border-radius: .06rem
      .iteam-list
        .iteam
          line-height: .76rem
          color: #666
          padding-left: .2rem  
</style>

